<template>
  <div>
    <el-card>
      <el-row>
        <el-col>
          <el-button type="button" @click="add()" class="mg20" v-if="rule"
            >添加</el-button
          >
        </el-col>
        <el-col></el-col>
      </el-row>
      <div slot="header" class="clearfix">
        <span>客户列表</span>
      </div>
      <el-table :data="tableData" border v-loading="tableLoading">
        <el-table-column prop="factoryName" label="钢厂名称"></el-table-column>
        <el-table-column
          prop="factoryLocation"
          label="钢厂位置"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="showdlog(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="delinfo(scope.row.id)"
              v-if="rule"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="editdlog(scope.row)"
              v-if="rule"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="5"
        :pager-count="11"
        layout="prev, pager, next"
        :total="pagecount"
        @current-change="steelpage"
      >
      </el-pagination>
    </el-card>
    <!-- 添加弹框 -->
    <el-dialog title="添加客户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="钢厂名称" :label-width="formLabelWidth">
          <el-input v-model="form.factoryName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="钢厂位置" :label-width="formLabelWidth">
          <el-input
            v-model="form.factoryLocation"
            placeholder="请输入钢厂位置"
          ></el-input>
        </el-form-item>
        <el-form-item label="钢厂详情" :label-width="formLabelWidth">
          <editor id="addrach" ref="rachinfo"></editor>
        </el-form-item>
        <el-input
          v-model="form.factoryLayer"
          type="hidden"
          autocomplete="off"
        ></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 查看弹框 -->
    <el-dialog title="查看客户信息" :visible.sync="showinfo">
      <el-form :model="showform">
        <el-form-item label="钢厂名称" :label-width="formLabelWidth">
          <el-input
            v-model="showform.factoryName"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="钢厂位置" :label-width="formLabelWidth">
          <el-input
            v-model="showform.factoryLocation"
            placeholder="请输入钢厂位置"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="钢厂详情" :label-width="formLabelWidth">
          <div v-html="showform.factoryDescription" class="box"></div>
        </el-form-item>
        <el-input
          v-model="showform.factoryLayer"
          type="hidden"
          autocomplete="off"
          :disabled="true"
        ></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showinfo = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑客户信息"
      :visible.sync="exitdialogVisible"
      class="dialogwidth"
    >
      <el-form :model="editform">
        <el-form-item label="钢厂名称" :label-width="formLabelWidth">
          <el-input
            v-model="editform.factoryName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-input
            v-model="editform.factoryLocation"
            placeholder="请输入活动区域"
          ></el-input>
        </el-form-item>
        <el-form-item label="钢厂详情" :label-width="formLabelWidth">
          <editor
            id="exitrach"
            ref="rachinfo1"
            :editdata="editform.factoryDescription"
          ></editor>
        </el-form-item>
        <el-input
          v-model="editform.factoryLayer"
          type="hidden"
          autocomplete="off"
        ></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit" :loading="exitloading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import editor from '@/components/Editor.vue'
import api from '@/api'
export default {
  components: {
    editor,
  },
  data() {
    return {
      exitloading: false,
      tableLoading: true,
      rule: false,
      loading: false,
      tableData: [],
      exitdialogVisible: false,
      showinfo: false,
      dialogFormVisible: false,
      form: {
        factoryName: '',
        factoryLocation: '',
        factoryDescription: '',
      },
      formLabelWidth: '100px',
      showform: {
        factoryName: '',
        factoryLocation: '',
        factoryDescription: '',
        factoryLayer: '',
      },
      editform: {
        factoryName: '',
        factoryLocation: '',
        factoryDescription: '',
        factoryLayer: '111111111',
        id: '',
      },
      pagecount: 0,
    }
  },
  methods: {
    //分页
    async steelpage(val) {
      this.tableData = []
      let nowpage = val ? val : 1
      let data = {
        page: nowpage,
        size: 5,
      }
      let _self = this
      try {
        let res = await api.steelInfo.getsteelinfoall(data)
        this.tableLoading = false
        if (res.status === 200) {
          if (res.data.msg === 'success') {
            let result = res.data.data.data
            this.pagecount = res.data.data.total * 1
            for (let i = 0; i < result.length; i++) {
              _self.tableData.push(result[i])
            }
          } else {
            _self.$message({
              message: '服务器错误',
              type: 'warning',
            })
          }
        }
      } catch (error) {
        _self.$message({
          message: '服务器错误',
          type: 'warning',
        })
      }
    },
    //查看信息
    showdlog(val) {
      this.showinfo = true
      let data = JSON.parse(JSON.stringify(val))
      console.log(data)
      this.showform.factoryName = data.factoryName
      this.showform.factoryLocation = data.factoryLocation
      this.showform.factoryDescription = data.factoryDescription
      this.showform.factoryLayer = data.factoryLayer
    },
    //删除信息
    delinfo(val) {
      let _self = this
      this.$confirm('此操作将会把所属项目一并删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          api.steelInfo.delsteelinfo(val).then((res) => {
            console.log(res)
            if (res.data.extraMsg === 'success') {
              _self.$message({
                type: 'success',
                message: '删除成功!',
              })
              _self.steelpage()
            } else {
              this.$message({
                type: 'info',
                message: '程序错误',
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    add() {
      this.dialogFormVisible = true
      this.form = {
        factoryName: '',
        factoryLocation: '',
        factoryDescription: '',
        factoryLayer: '1111',
      }
    },
    async submit() {
      this.loading = true
      let _self = this
      _self.form.factoryDescription = _self.$refs.rachinfo.editorContent
      if (!_self.form.factoryDescription) {
        this.$message('请重新输入')
        return
      }
      try {
        let data = {
          data: _self.form,
        }
        if (data.data.factoryName === '') {
          this.$message({
            message: '钢厂名称为必填',
            type: 'warning',
          })
          this.loading = false
          return
        }
        let res = await api.steelInfo.addsteelinfo(data)
        this.dialogFormVisible = false
        console.log(res)
        if (res.status === 200) {
          this.$message({
            message: '添加成功！',
            type: 'success',
          })
          this.loading = false
          this.steelpage()
        }
      } catch (error) {
        _self.$message({
          message: '服务器错误',
          type: 'warning',
        })
      }
    },
    //编辑
    editdlog(val) {
      this.exitdialogVisible = true
      this.editform = JSON.parse(JSON.stringify(val))
    },
    async editSubmit() {
      this.exitloading = true
      let _self = this
      _self.editform.factoryDescription = _self.$refs.rachinfo1.editorContent
      if (!_self.editform.factoryDescription) {
        this.$message('请重新输入')
        return
      }
      try {
        let data = {
          data: _self.editform,
        }
        let res = await api.steelInfo.editsteelinfo(data)
        this.exitloading = false
        if (res.data.msg === 'success') {
          _self.$message({
            message: '编辑成功',
            type: 'success',
          })
          _self.steelpage()
        }
      } catch (error) {
        _self.$message({
          message: '服务器错误',
          type: 'warning',
        })
      }
      this.exitdialogVisible = false
    },
  },
  mounted() {
    // this.steelpage();
    // if (localStorage.getItem('rule') == 'admin') {
    // 	this.rule = true
    // }
  },
}
</script>

<style scoped="scoped">
.mg20 {
  margin-bottom: 20px;
}

.box {
  width: 100%;
  height: 250px;
  overflow-y: auto;
  border: 1px solid #cccccc;
}
</style>
